<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <div>
      <div :id="mapId" style="height:500px;width:600px;"></div>
      <a-button v-if="!disabledButton" @click='openPolylineTool'>新增</a-button>
      <a-button v-if="!disabledButton" @click='enableEdit'>启动编辑</a-button>
      <a-button v-if="!disabledButton" @click='disableEdit'>禁止编辑</a-button>
      <a-button v-if="!disabledButton" @click='clearOverLays'>清除</a-button>
    </div>
  </a-modal>
</template>
<script>
  export default {
    name: 'tianditu',
    props: {
      disabledButton: {
        type: Boolean,
        required: false,
        default: false
      },
      /*mapId: {
        type: String,
        required: false,
        default: "edit"
      },*/
    },
    data() {
      return {
        title: "选择区域",
        visible: false,
        width: 700,
        zIndex: 1000,
        map: {},
        polygonTool: {},
        polygon: {},
        value: "",
        loadMapFlag:true,
        centerPoint: window._CONFIG['centerPoint'],
        mapId: "mapArea"+new Date().getTime(),
      }
    },
    mounted() {
      //this.loadMap();
    },
    methods: {
      loadMap() {
        this.visible = false;
        var map = new T.Map(this.mapId);
        map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)
        this.map = map;
      },
      show(value) {
        this.visible = true;
        this.$nextTick(() => {
          console.log(this.map);
          if(this.loadMapFlag){
            let imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
              "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
              "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=8ce3db4ba1240f799dd8364ae20d6ce4";
            //创建自定义图层对象
            let lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
            let config = {layers: [lay]};
            var map = new T.Map(this.mapId, config);

            //创建对象
            var ctrl = new T.Control.MapType([
              {
                title: '卫星混合',
                icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
                layer: TMAP_HYBRID_MAP
              },
              {
                title: '地图',
                icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png',
                layer: TMAP_NORMAL_MAP
              },
              {
                title: '卫星',
                icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
                layer: TMAP_SATELLITE_MAP
              }
            ]);
            //添加控件
            map.addControl(ctrl);
            this.map = map;
            this.loadMapFlag=false;
          }
          if(this.centerPoint && this.centerPoint.lng && this.centerPoint.lat){
            this.map.centerAndZoom(new T.LngLat(this.centerPoint.lng, this.centerPoint.lat), 16)
          }else{
            this.map.centerAndZoom(new T.LngLat(118.78042299999993, 32.04136), 12)
          }

          this.map.clearOverLays();
          if (value && value != "") {
            let pointsValue = JSON.parse(value);
            let points = [];
            for (let i in pointsValue) {
              points.push(new T.LngLat(pointsValue[i].lng, pointsValue[i].lat));
            }
            //创建面对象
            this.polygon = new T.Polygon(points, {
              color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
            });
            //向地图上添加面
            this.map.addOverLay(this.polygon);
            this.map.setViewport(points);
            console.log(this.polygon)
          }
        })

      },
      handleCancel() {
        this.visible = false;
      },
      handleOk() {
        let overlays = this.map.getOverlays();
        if (overlays.length > 0) {
          this.polygon = overlays[0];
          let points = this.polygon.getLngLats()[0];
          /*this.value="[";
          for(let i in points) {
            this.value+="{lat:"+points[i].lat+",lng:"+points[i].lng+"},";
          }
          this.value+="]";*/
          this.value = JSON.stringify(points);
        } else {
          this.value = "";
        }
        this.$emit("choseArea", this.value);
        this.handleCancel();
      }, openPolylineTool() {
        let overlays = this.map.getOverlays();
        console.log(overlays);
        if (overlays.length == 0) {
          //创建标注工具对象
          var config = {
            color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
          };
          this.polygonTool = new T.PolygonTool(this.map, config);
          this.polygonTool.open();
        }
      }, enableEdit() {
        let overlays = this.map.getOverlays();
        if (overlays.length > 0) {
          this.polygon = overlays[0];
          this.polygon.enableEdit();
        }
      }, disableEdit() {
        let overlays = this.map.getOverlays();
        if (overlays.length > 0) {
          this.polygon = overlays[0];
          this.polygon.disableEdit();
        }
      }, clearOverLays() { //清除所有
        let overlays = this.map.getOverlays();
        if (overlays.length > 0) {
          this.polygon = overlays[0];
          console.log(this.polygon);
        }
        this.map.clearOverLays();

      }
    }
  }
</script>
<style scoped>
</style>